<template>
  <div>
    <div>
      <van-nav-bar title="密码登录" left-arrow @click-left="$router.back()" />
    </div>
    <div>
      <!-- @submit -->
      <!-- 账号 -->
      <van-form>
        <van-field v-model="username" placeholder="用户名" />
        <!-- 密码 -->
        <van-field
          v-model="password"
          type="password"
          placeholder="密码"
          ref="xingzhi"
        />
        <!-- 验证码 -->
        <div>
          <div class="yzm">
            <input
              type="text"
              v-model.number="verification"
              placeholder="验证码"
              @input="handeInput"
            />
            <div class="dox3">
              <img :src="sms.code" alt="" />
            </div>
            <div class="condition">
              <p class="doc1">看不清</p>
              <p class="doc2" @click="Tryadifferentimage">换一张</p>
            </div>
          </div>
        </div>
        <!-- 中间红色字体 -->
        <div class="hint">
          <p>温馨提示：未注册过的账号，登录时将自动注册</p>
          <p>注册过的用户可凭账号密码登录</p>
        </div>
        <!-- 登录 -->
        <div style="margin: 16px">
          <van-button type="primary" style="width: 100%" @click="register"
            >登录</van-button
          >
        </div>
      </van-form>
      <div class="reset">
        <p :class="{ skip: change }" @click="modification">重置密码？</p>
      </div>
    </div>
  </div>
</template>

<script>
import { captchas, login } from "../api/registerjk";

export default {
  data() {
    return {
      username: "123456", //账号
      password: "", //密码
      verification: "", //验证码  .substr(0, 4)
      sms: "", //请求验证码
      registerPort: [], //登录login
      change: false,
      tkeno: "12345678910",
    };
  },
  //保存验证码
  created() {
    captchas().then((res) => {
      this.sms = res.data;
    });
  },
  methods: {
    //跳转
    modification() {
      this.change = true;
      let username = this.username;
      let password = this.password;
      this.$router.push({
        name: "replacement",
        params: {
          id: username,
          tien: password,
        },
      });
    },
    //截取验证码4位后的数
    handeInput(e) {
      console.log(e);
      if (e.target.value.length > 4) {
        this.verification = e.target.value.slice(0, 4);
      }
    },
    //重新换一张验证码
    Tryadifferentimage() {
      captchas().then((res) => {
        this.sms = res.data;
      });
    },
    //登录接口
    register() {
      //密码和站号不能小于5
      if (this.username.length < 5 && this.password.length < 5) {
        return this.$toast.fail("密码或站号为空");
      } else if (!this.verification) {
        //验证码不能为空
        this.$toast.fail("验证码为空");
        return;
      } else if (this.username != 123456 && this.password != 123456) {
        this.username = this.username;
        this.password = this.password;
        this.$toast.fail("密码错误");
        return;
      } else {
        //请求数据
        //登录login
        login({
          username: this.username, //账号
          password: this.password, //密码
          sms: this.sms, //验证码
        }).then((res) => {
          this.registerPort == res.data;
          console.log(res);
          this.$toast.fail("登录成功");
          this.$router.push("/home");
          localStorage.setItem("cilick", this.tkeno);
        });
      } //请求数据
      //登录login
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: rgb(49, 144, 232);
  margin-bottom: 15px;
  & .van-nav-bar__title {
    color: #fff;
    font-weight: 700;
  }
  & .van-icon {
    color: #fff;
  }
}
.yzm {
  position: relative;
  width: 100%;
  height: 2.5833rem;
  display: flex;
  justify-content: space-between;

  & input {
    margin: 0px 0px 0px 13.9992px;
    border: #fff;
  }
  .condition {
    //
    display: flex;
    flex-direction: column;
    font-size: 15px;
    padding-right: 10px;
    padding-top: 4px;
    // margin-right: 10px;
    // .doc1 {
    //   margin-top: 10px;
    // }
    .dox3 {
      position: absolute;
      height: 100%;
    }
    .doc2 {
      color: rgb(49, 144, 232);
      padding-top: 4px;
    }
    p {
      margin: 0rem 1.125rem;
    }
  }
}
.hint {
  font-size: 14px;
  color: red;
  p {
    padding: 0.4rem 0.6rem;
    margin: 0px 0px 0px 0px;
  }
}
.reset {
  float: right;
  margin-right: 10px;
}
.skip {
  color: red;
}
</style>